<template>
  <div class="companyDynamics">
    <div class="title"><p>公司动态</p></div>
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :lg="{span: '12'}"  class="dynamicsList" v-for="(i,index) in DynamicsList" :key="index" >
          <div @click="getDetail(i)">
            <el-card :body-style="{ padding: '0px', marginBottom: '1px',}" shadow="hover">
<!--              图片-->
              <div class="Img"><img :src="$downloadUrl+i.fileUrls" class="image" v-if="i.fileUrls"/></div>
<!--              文字-->
              <div class="Content">
                <p>标题文字</p>
                <p>简单介绍简单介绍简单介绍简单介绍简单介绍简单介绍简单介绍简单介绍</p>
                <p>时间</p>
              </div>
          <!--              <img src="../assets/images/empty.png" class="image" v-else/>-->
<!--              <div style="padding: 14px;height: 50px">-->
<!--                <div class="text" :title="i.title">{{i.title}}</div>-->
<!--              </div>-->
            </el-card>
          </div>
        </el-col>
      </el-row>
<!--    详细信息-->
<!--    <el-dialog-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="50%" >-->
<!--      <p style="margin: 20px 0px">{{dynamicsDetail.title}}</p>-->
<!--      <div class="create">-->
<!--        <p style="color: #999093;margin: 15px 0px">创建时间：{{dynamicsDetail.createTime}}</p>-->
<!--        <p style="color: #999093;margin: 15px 0px">创建人：{{dynamicsDetail.createBy}}</p>-->
<!--      </div>-->
<!--      <div style="width: 100%">-->
<!--        <div class="content" v-html="dynamicsDetail.content">{{dynamicsDetail.content==''?'暂无内容':''}}</div>-->
<!--      </div>-->

<!--    </el-dialog>-->

  </div>
</template>

<script>
  export default {
    name: 'companyDynamics',
    props:{
      DynamicsList:Array
    },
    data(){
      return{
        dialogVisible:false,
        dynamicsDetail:{
          title:'标题标题',
          createdTime:'2020-10-11 12:23',
          createBy:'张三丰',
          content:'<p>这是一段富文本内容</p>'
        }
      }
    },
    methods:{
      getDetail(data){
        this.dialogVisible=true
        this.dynamicsDetail =data
      }
    }
  }
</script>

<style scoped lang="less">

  /*.el-col-lg-4-8 {*/
  /*  width: 20%;*/
  /*}*/
  .companyDynamics{
    margin: 20px auto;
    .title{
      margin:50px 0px 0px 0;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      text-align: left;
      img{
        padding-right: 6px;
      }
    }

    .dynamicsList{
      height: 182px;
      margin-top: 24px;
      overflow: hidden;
      //图片
      .Img{
        float: left;
        width: 322px;
        height: 182px;
      }
      //文字
      .Content{
        width: 250px;
        float: left;
        margin-left: 10px;
        p:first-child{
          width: 64px;
          height: 24px;
          color: rgba(48, 48, 48, 1);
          font-size: 16px;
          font-weight: bold;
          margin-top: 28px;
        }
        p:nth-of-type(2){
          width: 245px;
          height: 48px;
          color: rgba(125, 125, 125, 1);
          font-size: 14px;
          text-align: left;
          margin-top: 20px;
        }
        p:last-child{
          width: 58px;
          height: 18px;
          color: rgba(155, 155, 155, 1);
          font-size: 12px;
          text-align: left;
          margin-top: 22px;
        }
      }
      .image{
            width: 100%;
            height: 182px;
          }
    }
      //.dynamicsList{
      //  height: 239px;
      //  margin:10px 0;
      //  .image{
      //    width: 100%;
      //    height: 168px;
      //  }
      //  ::v-deep.el-card{
      //    width: 100%;
      //    height: 100%;
      //    border: none;
      //    .text{
      //      font-size: 14px;
      //      font-family: Microsoft YaHei;
      //      font-weight: 400;
      //      color: #666666;
      //      display: -webkit-box;
      //      -webkit-box-orient: vertical;
      //      -webkit-line-clamp: 1;
      //      overflow: hidden;
      //      text-overflow:ellipsis;
      //    }
      //  }
      //}
    ::v-deep.el-dialog{
      overflow: auto;
      .el-dialog__body{
        padding-top: 10px;
        p{
          text-align: center;
          font-size: 20px;
        }
        .create{
          display: flex;
          justify-content: space-around;
          p{
            font-size: 15px;
          }
        }
        .content{
          padding-top: 10px;
          min-height: 200px;
          width: 100%;
          overflow: auto;
          img{
            width: 100%;
          }
          p{
            margin: 15px;
          }
        }
      }

    }
  }
  @media screen and (min-width: 1200px) {
    .el-col-lg-4-8 {
      width: 20%;
    }
  }
</style>
